<template>
<el-container>
  <el-header>
  <ArticleHeader/>
  </el-header>
  <el-main>
    <el-form label-width="100px">
      <el-form-item label="标题">
        <el-input v-model="article.title" style="width: 200px" placeholder="#..."></el-input>
      </el-form-item>
      <el-form-item label="类型" >
        <el-select v-model="article.categoryId">
          <el-option v-for="cat in categoryArr"
                     :label="cat.name" :value="cat.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签" >
        <div>
      <el-checkbox-group v-model="searchParam" max="3">
        <el-checkbox-button style="margin: 5px" v-for="(tag,index) in tagArr"  :key="index">{{tag}}</el-checkbox-button>
      </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="封面">
        <img v-if="isEdit" :src="article.oldImgUrl"
             style="width: 258px;height: 145px;">
        <el-upload
            action="http://localhost:8080/v1/uploads/"
            name="file"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="内容">
        <div style="border: 1px solid #ccc" >
          <quill-editor
              v-model="article.content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus=""
              style="height: 300px"
          ></quill-editor>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="post()">发布</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</el-container>
</template>

<script>

import ArticleHeader from "@/components/ArticleHeader.vue";
import {quillEditor} from "vue-quill-editor";

export default {
  name: "MessageQuillArticle",
  components:{
    quillEditor,
    ArticleHeader
  },
  data:function (){
    return{
      tagArr:["java","c++",
        "python","php",
        "c",".net"],
      searchParam:{},
      article:{
        title: "",
        categoryId:"",
        oldImgUrl:"",
        content:""
      },
      isEdit:"",
      categoryArr:[],
      title:'',
      dialogImageUrl: '',
      dialogVisible: false,
      editorOption:{},
      rules:[],
      ruleForm:[
        {

        }
      ],
      value: ''
    }

  },
  methods:{
    handleSuccess(response,file,fileList){//当上传成功时此方法会执行
      // response==file.response 代表服务器响应的ResultVo
      this.url = response.data.url;
    },

    /*失去焦点事件*/
    onEditorBlur(quill){
      console.log(("editor blur",quill))
    },
    /*获取焦点事件*/
    onEditorFocus(quill){
      console.log(("editor focus",quill))
    },
    /*准备富文本编辑器*/
    onEditorReady(quill){
      console.log(("editor ready",quill))
    },
    /*内容改变时间*/
    onEditorChange({quill,html,text}){
      console.log("editor change!",quill,html,text);
      this.content=html;
    },
    onInput(value) {
      console.log(value)
      this.content = value // 将编辑器内容存储到 content 变量
    },
    validate(){
      let vm = this;
      return new Promise((resolve,reject) => {
        vm.$refs.form.validate(valid => {
          if(valid){
            resolve()
          }else{
            reject()
          }
        })
      })
    },
    handleSubmit() {
      let vm = this;

      vm.validate()
          .then(() => {
            // 在这里写入发布文章的逻辑
            const data = {
              title: vm.form.title,
              category: vm.form.category,
              cover: vm.form.cover,
              content: vm.form.content,
            };
            this.axios({
              method: 'post',
              url: '/api/article/add',
              data: qs.stringify(data),
            }).then(res => {
              console.log(res.data);
              this.$message({
                type:'success',
                message:'发布成功'
              });
            }).catch(err => {
              console.log(err);
              this.$message({
                type:'error',
                message:'发布失败'
              });
            })
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "表单校验不通过，请检查输入项！",
            });
          });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }

  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>